import React from 'react';
import { Icon } from 'antd'
import classnames from 'classnames/bind'
import styles from './Item.scss'
import PropTypes from 'prop-types'
const cx = classnames.bind(styles)
class Item extends React.Component{
    static propTypes = {
        onClick: PropTypes.func,
        data:PropTypes.object
    };
    render()
    {
      let {data,onClick}=this.props;
      if(this.props.withIcon)
      {
        var {image,title,author,num,avatar}=data;
      }
      else
      {
         var {title,author,avatar}=data;
      }
      return this.props.withIcon?(<div className={cx('item')} onClick={onClick}>
                                        <div className={cx('left')}>
                                            <Icon type={image} className={cx('icon')}/>
                                        </div>
                                        <div className={cx('right')}>
                                            <div className={cx('title')}>
                                                {title}
                                            </div>
                                            
                                            <div className={cx('author')}>
                                                <div className={cx('divs')}>
                                                {
                                                    avatar.map((img,index)=>{
                                                        return (<img src={img} key={index}/>)
                                                    })
                                                }
                                                </div>
                                                <div className={cx('divs')}>
                                                    <span>此集合中有 {num} 篇文章</span><br/>
                                                    <span>作者：</span>
                                                        {
                                                            author.map((c,index)=>{
                                                                return (
                                                                    index==author.length-1?<span key={index}>{c}</span>:<span key={index}>{c+' 和 '}</span>
                                                                )
                                                            })
                                                        }
                                                </div>
                                            </div>
                                        </div>
                                </div>)
            :(<div className={cx('item')} style={{padding:'5% 5%'}} onClick={onClick} >
                <div className={cx('right')}>
                        <div className={cx('title')}>
                            {title}
                         </div>
                         
                         <div className={cx('author')}>
                            <div className={cx('divs')}>
                            {
                                avatar.map((img,index)=>{
                                    return (<img src={img} key={index}/>)
                                })
                            }
                            </div>
                            <span style={{marginLeft:'1rem'}}>作者：</span>
                            {
                                author.map((c,index)=>{
                                    return (
                                        index==author.length-1?<span key={index}>{c}</span>:<span key={index}>{c+' 和 '}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>);
    }
}
export default Item;

